<template>
  <el-container>
    <el-main class="main">
      <el-form inline>
        <el-form-item label="范围">
          <el-select v-model="searchParams.type" @change="handleRangeChange">
            <el-option v-for="item in rangeList" :label="item.label" :value="item.value"></el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="ID">
          <el-input v-model="searchParams.id" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="模型ID">
          <el-input v-model="searchParams.modelId" placeholder="请输入模型ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="Search" bg @click="pageModel">搜索</el-button>
          <el-button icon="Link" size="mini" type="warning" @click="handleAssociateDialog">关联</el-button>
        </el-form-item>
      </el-form>
      <el-table v-if="qualityModelTable.length>0" :data="qualityModelTable">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="类型" prop="type">
          <template #default="scope">
            <el-tag type="primary">{{ rangeList.find(item => item.value == scope.row.type).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="模型ID" prop="modelId"></el-table-column>
        <el-table-column width="150" label="操作" fixed="right">
          <template #default="scope">
            <el-button icon="Connection" size="small" plain type="warning" @click="handleRemoveAssociate(scope.row)">解除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-if="page.total"
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :page-sizes="[10, 20, 30, 40,50]"
          layout="total,sizes, prev, pager, next"
          @size-change="pageModel"
          @current-change="pageModel"
          :total="page.total"
      />
      <el-dialog v-model="statusDialog.associateDialog" title="关联模型">
        <el-form inline>
          <el-form-item label="范围">
            <el-select v-model="associateForm.type" @change="handleRangeChange">
              <el-option v-for="item in rangeList" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-select-v2 v-model="associateForm.id" placeholder="请输入数据ID" :options="qualityList">
            </el-select-v2>
          </el-form-item>
          <el-form-item label="模型">
            <el-select v-model="associateForm.modelId" placeholder="请输入模型ID">
              <el-option v-for="item in modelList" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="handleAssociate" type="primary" bg>关联模型</el-button>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import {onBeforeMount, ref, watch} from "vue";
import {PageParams} from "@/api/common.ts";
import {
  associateQuality,
  getModelList,
  pageModelInfo,
  PageQualityModel,
  QualityModel,
  QualityModelPost, removeAssociate
} from "@/api/model.ts";
import {getStation} from "@/api/airQuality.ts";
import {getAreas} from "@/api/area.ts";
import {getProvinces} from "@/api/province.ts";

interface Option {
  value: string;
  label: string
  disabled: boolean;
}

onBeforeMount(() => {
  init()
})

const init = () => {
  initDict()
  pageModel()
  initModels()
}

const initDict = () => {
  getStation().then(res => {
    stations.value = res.data.data.map(item => {
      return {
        label: item.positionName+"—"+item.stationCode,
        value: String(item.stationCode),
        disabled: !item.status
      }
    })
  })
  getAreas().then(res => {
    areas.value = res.data.data.map(item => {
      return {
        label: item.cityName+"—"+item.cityCode,
        value: String(item.cityCode),
        disabled: false
      }
    })
  })

  getProvinces().then(res => {
    provinces.value = res.data.data.map(item => {
      return {
        label: item.provinceName+"—"+item.id,
        value: String(item.id),
        disabled: false
      }
    })
  })
}

const pageModel = () => {
  pageModelInfo({currentPage: page.value.current, pageSize: page.value.size, ...searchParams.value}).then(res => {
    qualityModelTable.value = res.data.data?.records
    page.value.current = res.data.data?.current
    page.value.size = res.data.data?.size
    page.value.total = res.data.data?.total
  })
}

const initModels =()=>{
  getModelList().then(res=>{
    modelList.value=res.data.data?.map(item=>{
      return {
        label:`${item.name}—${item.id}`,
        value:String(item.id),
        disabled:false
      }
    })
  })
}

const page = ref<PageParams>({
  current: 1, size: 20, total: 0
})

const searchParams = ref<QualityModel>({
  id: null, modelId: null, type: null
})

const qualityModelTable = ref<PageQualityModel[]>([])

const stations = ref<Option[]>()

const areas = ref<Option[]>()

const provinces = ref<Option[]>()

const statusDialog = ref({
  associateDialog: false
})

const rangeList = [
  {
    label: "省区",
    value: 0
  },

  {

    label: "城市",
    value: 1
  },
  {

    label: "站点",
    value: 2
  }
]

const qualityList = ref<Option[]>([])

const associateForm = ref<QualityModel>({
  id: null, modelId: null, type: null
})

const modelList = ref<Option[]>()

const handleRangeChange = () => {
  if (associateForm.value.type === 0) {
    qualityList.value = provinces.value
  }

  if (associateForm.value.type === 1) {
    qualityList.value = areas.value
  }


  if (associateForm.value.type === 2) {
    qualityList.value = stations.value
  }
}

const handleAssociate = () => {
  associateQuality(associateForm.value).then(res=>{
    ElMessage.success(res.data.msg)
    pageModel()
  })
}

const handleAssociateDialog = () => {
  statusDialog.value.associateDialog = true
  associateForm.value = {
    id: null, modelId: null, type: null
  }
}

const handleRemoveAssociate=(row)=>{
  const {id}=row
  removeAssociate(id).then(res=>{
    ElMessage.success(res.data.msg)
    pageModel()
  })
}
</script>
<style scoped>
.el-form-item__content > .el-select {
  width: 240px
}
.el-form {
  text-align: start;
}
</style>